<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta content="IE=11.0000" http-equiv="X-UA-Compatible">
  <meta name="GENERATOR" content="MSHTML 11.00.10586.494"></meta> 
  <title>视频播放</title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href='<c:url value="/share/bootstrap.min.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'>
  <link rel="stylesheet" href='<c:url value="/share/video-js.css"></c:url>'>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script type="text/javascript" src='<c:url value="/js/jquery.min.js"></c:url>'></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script type="text/javascript" src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/all.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/prefixfree.min.js"></c:url>'></script>
  <script type="text/javascript" src='<c:url value="/js/video.js"></c:url>'></script>
  <style type="text/css">
    video::-webkit-media-controls {  
        display:none !important;
    }
    #example_video_1{
      float: left;
    }
    .video_content_right{
      height: 100%;
      float: left;
    }
    /* .video_content{
      height: 495px;
    } */
    .glyphicon-chevron-right:before{
        position: absolute;
        top: 50%;
        left: 4px;
    }
    .glyphicon{
      height: 100%;
        top: 0;
        line-height: 0;
        cursor: pointer;
        display: block;
        width: 22px;
        text-align: center;
        position: relative;
        overflow: hidden;
        float: left;
    }
    .video_content_right_right{
      width: 303px;
      height: 100%;
        float: right;
          position: relative;
          overflow: hidden;
    }
    .video_content_right_right_title1{
      position: relative;
      overflow: hidden;
      text-align: center;
      background: #fff;
    }
    .video_content_right_right_title1>div{
      position: relative;
      overflow: hidden;
      padding: 10px 0;
      cursor:pointer
    }
    .video_content_right_right_title1>div>a{
      margin: 10px 0;
      color: #9c9c9d;
    }
    .video_content_right_right_title1_a{
      border-bottom: 2px solid #295c96;
    }
    .video_content_right_right_title1_a>a{
      color: #295c96 !important;
    }
    .video_content_right_right_content_1{
      /*height: 50%;*/
    }
    /* .carousel-indicators{
      display: none;
    } */
    .video_content_right_right_content_1_content,.video_content_right_right_content_1_content>div{
      position: relative;
        overflow: hidden;
        overflow-y:auto;
    }
    .video_content_right_right_content_1_content>div,.video_content_right_right_content_2_copys{
      display: none;
    }
    .video_content_right_right_content_2_copys:nth-child(1){
      display: block;
    }
    .video_content_right_right_content_1_content>div:nth-child(1){
      display: block;
      padding: 24px 0;
    }
    .create_plus{
      position: absolute;
        right: 0;
        top: 5px;
        width: 50px;
        height: 20px;
        margin: 0 !important;
        font-size: 12px;
        border: 1px solid #295c96;
        border-radius: 10px;
    }
    .glyphicon-plus:before {
        content: "\2b";
        position: relative;
        top: 10px;
    }
    .dir_Style>ul>li>a{
      padding: 4px 10px;
      display: block;
      white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
    }
    /*添加展开收缩旋转动画*/
    .back_right_rotate{
      -webkit-transform: rotate(180deg);/* Safari 和 Chrome */
      -moz-transform: rotate(180deg);/* Firefox */
      -ms-transform: rotate(180deg);/* IE 9 */
      -o-transform: rotate(180deg);/* Opera */
      transform: rotate(180deg);
    }
    /* .video_content_right_right_content_1>.video_content_right_right_title1>div{
      display: none;
    }
    .video_content_right_right_content_1>.video_content_right_right_title1>div:nth-child(1){
      display: block;
    } */
    a{
      text-decoration:none;
    }
    a:link{
      text-decoration:none;
    }
    a:visited{
      text-decoration:none;
    }
    a:hover{
      text-decoration:none;
    }
    a:active{
      text-decoration:none;
    }
    /*反馈评分*/
    .r {
      padding: 5px 0;
      width: 283px;
        float: left;
        line-height: 30px;
        position: relative;
        overflow: hidden;
        background: #fff;
    }
    .zh5 {
        float: left;
        position: relative;
        margin: 4px 10px 0 10px;
        width: 125px;
        height: 20px;
        background: url(images/xingxing3.png) 0 -30px no-repeat;
    }
    .zh5ul,.zh5ul_2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
        width: 125px;
        height: 20px;
    }
    #zh5_red,#zh5_red_2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height: 20px;
        background: url(images/xingxing3.png) 0 0 no-repeat;
    }

    .zh5 .cur1 {
        width: 20%;
    }

    .zh5 .cur2 {
        width: 40%;
    }

    .zh5 .cur3 {
        width: 60%;
    }

    .zh5 .cur4 {
        width: 80%;
    }

    .zh5 .cur5 {
        width: 100%;
    }

    .zh5ul li,.zh5ul_2 li{
        overflow: hidden;
        float: left;
        width: 25px;
        height: 20px;
        cursor: pointer;
        line-height: 20em;
        background-position: 0 -30px;
    }
    .des{
      /*padding-right: 80px;*/
    }
    .video_content_right_right_content_2_copys_r{
      position: relative;
      overflow: hidden;
      padding: 10px;
    }

  </style>

  <style class="cp-pen-styles">
@import url('<c:url value="/share/FB_api.css"></c:url>');

/* fontawesome */
[class*="fontawesome-"]:before {
      font-family: 'FontAwesome', sans-serif;
    font-size: 14px;
    position: absolute;
    margin-top: 5px;
    margin-left: 10px;
}

body{
  margin:0px;
  font-family: Arial, Helvetica, sans-serif;
  background:#E5EBEF;
}

div .header{
  background:rgba(57, 89, 123, 0.8);
  width:100%;
  height:80px;
  position:fixed;
  z-index:1;
  padding-left:160px;
}

div .sidebar .circles{
  border-style:solid;
  border-color:white;
  border-radius:50%;
  border-width:5px;
  width:10px;
  height:10px;
  margin-top:30px;
  margin-left:15px;
  float:left;
  
  box-shadow: 16px 0px 0px -5px #29343A,
              16px 0px 0px 0px white,
              32px 0px 0px -5px #29343A,
              32px 0px 0px 0px white;
  
  position:relative;
}
div .sidebar .exitMenu input{
  display:none;
}

div .sidebar .exitMenu label{
  border-style:solid;
  border-color:white;
  border-radius:50%;
  border-width:5px;
  width:20px;
  height:20px;
  margin-left:-10px;
  float:left;
  
  position:absolute;
  bottom:35px;
}

div .sidebar .exitMenu input:checked ~ label{
  border-style:double;
}

div .sidebar .exitMenu input:checked ~ .finishButton{
  bottom:-100px;
}

div .sidebar label:not(:first-child):hover{
  opacity:.8;
  cursor:pointer;
}

div .header .path{
   margin-top:15px;
}

div .header .path p{
  color:rgba(255,255,255,.7);
  float:left;
}
div .header .path p:hover{
  color:rgba(255,255,255,1);
  cursor:pointer;
}

div .header .path p:not(:first-child):before{
  content: ">";
  margin:0px 10px;
  display:block-inline;
  color:#456;
  font-weight:bold;
}

div .header .logo{
  margin-top:10px;
  margin-right:180px;
  float:right;
  font-size:25px;
}

div .header .logo:after {
  content: "By Rikard Legge";
  color:#2A4C6F;
}


div .sidebar{
  background:#29343A;
  position:fixed;
  height:100%;
}

.content h1{
  font-size:40px;
  color: rgba(150,150,150, 0.8);
  text-shadow: 0px 0px 6px #def, 0 0 0 #000, 0px 0px 6px #def;
  padding:5px;
  outline: none;
  transition:.2s;
}

h1:focus{
  background:white;
  border-radius:5px;
  box-shadow:inset 0px 0px 5px 0px grey;
  text-shadow: none;
  color:#444;
}
h1:hover{
  background:white;
  border-radius:5px;
  box-shadow:inset 0px 0px 5px 0px grey;
  text-shadow: none;
  color:#444;
}

::selection {
background-color: #444;
color: #ffffff;
}

.content #contentText{
	overflow-y: auto;
  width:100%;
  border:none;
  height:170px;
  border-radius:10px;
  padding: 5px;
  outline: none; 
  resize: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  transition:.2s;
}

.content #contentText:focus{
  background:white;
  box-shadow: inset 0px 0px 4px -1px black;
}
.content #contentText:hover{
  background:white;
  box-shadow: inset 0px 0px 4px -1px black;
}

.textEditing{
  margin-left:8px;
}

.textEditing input{
  display:none;
}

.textEditing span{
  margin:0px;
  margin-left:-5px;
  cursor:pointer;
}

.textEditing #link{
  display:inline-block;
  position:absolute;
  margin-top:17px;
  width:0;
  transition:.4s;
  overflow:hide;
  border:none;
}

.textEditing input:first-child + label span:after {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.textEditing input:nth-last-child(2) + label span:after {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.textEditing span:after {
  content: "";
  display:inline-block;
  width: 30px;
  height: 30px;
    border-color:#B8C3CB;
    border-width:1px;
    border-style:solid;
  background-color:#F2F6F8;
}

.textEditing #linkLable span:after{
  background:#29343A;
  transition:.4s;
  width:0px;
}

.textEditing input:checked + label span:after {
    background-color:#29343A;
  color:#fff;
}

.textEditing input:checked + label span {
  color:#fff;
}

.textEditing #attachment:checked ~ #linkLable span:after {
  width:320px;
}

.textEditing #attachment:checked ~ #link {
  width:300px;
}

.textEditing span:hover:after {
    background-color:white;
}

div .finishButton {
  width:calc(303px);
  position:fixed;
  bottom:0;
  background:#E5EBEF;
  transition:.3s ease;
  
  box-shadow: 0px 0px 0px #fff, 0px 0px 5px #888;
}

.finishButton a{
    background-color: #999;
    border-radius: 7px;
    border-width:1px;
    border-color:#eee;
    border-style:solid;
    color: #fff;
    display: inline-block;
    padding: 5px;
    text-align:center;
    text-decoration: none;
    vertical-align: middle;
}

.finishButton a:hover{
   box-shadow:inset 0px 0px 3px black;
}

#publish{
    background-color: #57D36B;
}
#save{
    background-color: #62B1DF;
}
#delete{
    background-color: #E37668;
    position:absolute;
}

input{
   outline: none; 
}
label{
	margin-top: 5px;
    margin-bottom: 0 !important;
}
</style>
</head>
<body>
  <div class="video_content">
    <video class="video-js vjs-default-skin vjs-big-play-centered" id="example_video_1" preload="auto" controls="" poster="<c:url value='${imgUrl}'></c:url>" data-setup="{}">
      <!-- http://vjs.zencdn.net/v/oceans -->
        <source src="${url}" type="video/${type}">     
        <!-- <source src="http://101.201.80.63:10000/eduPlatform/video/abc.mp4" type="video/mp4"> 
        <source src="http://101.201.80.63:10000/eduPlatform/video/abc.webm" type="video/webm">     
        <source src="http://101.201.80.63:10000/eduPlatform/video/abc.ogv" type="video/ogg">  -->    
        <!-- <track kind="captions" src="demo.captions.vtt" srclang="en" label="English">
        Tracks need an ending tag thanks to IE9 
                  <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English">
                  Tracks need an ending tag thanks to IE9    -->
      </video>
  </div>

  <script src='<c:url value="/js/video.js"></c:url>'></script>
    <script type="text/javascript">
      //videojs.options.flash.swf = "http://101.201.80.63:10000/eduPlatform/video/Style.swf";
      var myVid = document.getElementById("example_video_1");
      var video = localStorage.getItem("video");
      //上次播放时间段
      myVid.currentTime = video;
     // console.log(video);
      /*if(video > 0){
      	$("#example_video_1").attr("poster","");
      }*/
      //初始化配置
      videojs(myVid,{
          techOrder : ["html5","flash"],
          children : {
            // bigPlayButton : false,
              textTrackDisplay : false,
              posterImage: false,
              errorDisplay : false,
              controlBar : {
                  captionsButton : false,
                  chaptersButton: false,
                  subtitlesButton:false,
                  liveDisplay:false,
                  playbackRateMenuButton:false
              }
          }
      },function(){
          //console.log(this)
      });

    //事件响应
    var player = videojs('example_video_1');
    // 检测播放时间
    player.on('timeupdate', function () {  
      //console.log('当前播放时间：' + player.currentTime());
      localStorage.setItem("video",player.currentTime());
        // 如果 currentTime() === duration()，则视频已播放完毕
        if (player.duration() != 0 && player.currentTime() === player.duration()) {
            // 播放结束
        console.log('播放结束时间：' + player.currentTime());
        }
      });
    // 开始或恢复播放
    player.on('play', function() {  
      $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").hide();
    });
    // 暂停播放
    player.on('pause', function() {  
        console.log(video);
      $(".vjs-default-skin.vjs-has-started .vjs-big-play-button").show();
    });

    //视频高度、宽度获取设置
    $("#example_video_1").css({
      width: $(window).width(),
      height: $(window).height()
    });

    </script>
</body>
</html>